<template>
    <footer class="footer">
        <span class="todo-count">剩余<strong>{{list.length}}</strong></span>
        <ul class="filters">
        <li>
            <a @click="classToggle('all')" :class="{selected:toggle=='all'}" href="javascript:;" >全部</a>
        </li>
        <li>
            <a  @click="classToggle('no')" :class="{selected:toggle=='no'}"  href="javascript:;">未完成</a>
        </li>
        <li>
            <a  @click="classToggle('yes')" :class="{selected:toggle=='yes'}"  href="javascript:;" >已完成</a>
        </li>
        </ul>
        <button class="clear-completed" @click="clear">清除已完成</button>
    </footer>
</template>

<script>
export default {
    props:["list"],
    data(){
        return{
            toggle:"all"
        }
    },
    methods:{
        classToggle(val){
            this.toggle=val
            this.$emit("toggle",val)
        },
        clear(){
            this.$emit("clear")
        }
    }
}
</script>